<template>
  <div id="ringChart" style="width: 100%; height: 220px"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {},
  mounted() {
    // this.initChart();
  },
  methods: {
    initChart(echartsData) {
      console.log("echartsData", echartsData);
      const chart = echarts.init(document.getElementById("ringChart"));
      chart.setOption({
        tooltip: {},
        grid: {
          top: 0,
          bottom: 0,
          right: 0,
          left: 0,
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "center",
            style: {
              text: "46", // 需动态计算总和
              textAlign: "center",
              fontSize: 18,
              fontWeight: "bold",
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"], // 内半径40%，外半径70%
            data: echartsData,
            label: { show: true, formatter: "{b}: {c}" },
          },
        ],
      });
    },
  },
};
</script>
